<template>
    <div v-if="true">
        <tabs/>
        <el-row>
            <el-col :span="12">

                
                <header style="border: solid 2px purple;margin-bottom:50px;padding:30px;height:calc(100% - 150px);overflow: scroll;">
                    <div style="overflow-y:scroll;">
                        <el-tabs tab-position="left">
                            <el-tab-pane label="路由跳转与拦截">
                                <el-button @click="win.$v3.$router.push('/x-home')">去x-home页面</el-button>
                                <!-- win就是window -->

                                <br/>
                                <br/>

                                <el-alert>在mfc-app.m.htm中使用如下代码拦截:</el-alert>
                                <el-alert>
                                    <pre style="text-align: left;
                                    pointer-events: none;
                                    position: relative;
                                    left: -45%;">
                                        window.$v3.$router.beforeEach((to,from,next)=>{
                                            // console.log('to and from --:',to,from)
                                            next()
                                        })
                                    </pre>
                                </el-alert>
                            </el-tab-pane>
                            <el-tab-pane label="国际化和pinpa">
                                读取$t.lang--:{{$t.lang}}<br/>
                                读取$t.foo--:{{$t.foo}}<br/>
    
                                <!-- <el-button @click="win.console.log($t)">中英文切换</el-button> -->
                                <el-button @click="$switchLanguage('en')">切换到英文</el-button>
                                <el-button @click="$switchLanguage('zh-cn')">切换到中文</el-button>
                                <!-- <el-button @click="$t.lang=$t.lang=='zh-cn'?'en':'zh-cn'">中英文切换</el-button> -->
                                <br/>
                                
                                <br/>
                                读取数据仓库$store.currentActive:
                                {{$store.currentActive}}<br/>
                                <el-button @click="$store.currentActive=2">更新数据仓库</el-button>
                                
                            </el-tab-pane>
                            <el-tab-pane label="加载子组件">
                                <el-button  @click="win.$v3.$router.push('/x-demo-child-comp')">load</el-button>
                            </el-tab-pane>
                            <el-tab-pane label="读取图片">
                                <img style="width:200px;" src="./mfc-src/assets/images/demo.png"/>
                                <!-- <img style="width:200px;" src="/mfc-src/assets/images/demo.png"/> -->
                            </el-tab-pane>
                            <el-tab-pane label="读取json">
                                <el-button @click="readJSON">读取json并打印到控制台</el-button>
                            </el-tab-pane>
                            <el-tab-pane label="运行时读取esm">
                                <el-button @click="readESM">load x-demo/esm-demo.js,不支持tree shaking仅支持读取export default部分</el-button>
                            </el-tab-pane>
                            <el-tab-pane label="组件加载前批量读取esm">
                                <el-button @click="$router.push('/x-demo-multi-read-esm')">去multi-read-esm路由</el-button>
                            </el-tab-pane>
                            <el-tab-pane label="样式加载">
                                <el-button @click="$router.push('/x-demo-css')">load</el-button>
                            </el-tab-pane>
                            <el-tab-pane label="setup无须返回演示">
                                <el-button @click="$router.push('/x-demo-setup-without-return')">load</el-button>
                            </el-tab-pane>
                            </el-tab-pane>
                            <el-tab-pane label="父子组件传值和通讯">
                                <el-button @click="$router.push('/x-demo-parent-child-communication')">load</el-button>
                            </el-tab-pane>
                            <el-tab-pane label="路由注册">
                                查阅mfc-src\mfc.route.config.js
                            </el-tab-pane>
                            <el-tab-pane label="开发手册">
                                查阅mfc.md和mfc-intro.md
                            </el-tab-pane>
                            <el-tab-pane label="http请求与拦截">
                                <el-button @click="$router.push('/x-demo-http')">load</el-button>
                            </el-tab-pane>
                            <el-tab-pane label="动态加载组件">
                                <el-button @click="$router.push('/x-demo-dynamic-mfc-comp')">load</el-button>
                            </el-tab-pane>
                            <el-tab-pane label="加载全局组件">
                                <global-variable-selector/>
                            </el-tab-pane>
                            <el-tab-pane label="less样式支持">
                                <div style="height:40px;" v-loading="true">

                                </div>
                                版本4.1.3：
                                <el-input
                                cols="10"
                                rows="10"
                                type="textarea"
                                value="<link rel='stylesheet/les' type='text/css' href='./mfc-src/mfc-global.les' />
  
                                <script src='./mfc-src/mfc_modules/less-4.1.3.js'></script>"
                                >

                                    
                                </el-input>
                            </el-tab-pane>
                            <el-tab-pane label="加载原生html片段或者svg">
                                已自动加载(代码书写请包裹在一个标签中):<br/>
                                <div>
                                    <include src="./mfc-src/x-demo-tpl/x-demo-tpl.html"></include>
                                    <!-- <include src="/mfc-src/x-demo-tpl/x-demo-tpl.html"></include> -->
                                </div>
                                <div>
                                    <include src="./mfc-src/x-demo-tpl/x-demo-svg.svg"></include>
                                    <!-- <include src="/mfc-src/x-demo-tpl/x-demo-svg.svg"></include> -->
                                </div>
                                
                                
                            </el-tab-pane>

                            <el-tab-pane label="keep-alive演示">
                                <el-button @click="$router.push('x-demo-keep-alive-page1')">进入路由1</el-button>
                                <el-button @click="$router.push('x-demo-keep-alive-page2')">进入路由2</el-button>
                                <br/>
                                <br/>
                                <el-alert>tips:互相切换，状态全部保留</el-alert>
                            </el-tab-pane>
                            <el-tab-pane label="draggable">
                                <el-button @click="$router.push('x-demo-draggable')">load</el-button>
                            </el-tab-pane>
                            <el-tab-pane label="echarts-demo">
                                <el-button @click="$router.push('x-demo-echarts')">load</el-button>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </header>
        
            </el-col>
            <el-col :span="11" style="padding-left:30px;border:solid 2px green;margin-left:10px;height:calc(100% - 150px);padding:10px;">

                <h1 style="color:red;">
                    注意此绿色区域的内容不会随着左侧侧边菜单点击自动改变，需要点击侧边菜单点击后菜单右侧的相关按钮，才能加载
                </h1>

                <router-view v-slot="{ Component }">
                    <keep-alive>
                        <component :is="Component"></component>
                    </keep-alive>
    
    
                </router-view>
            </el-col>
        </el-row>


        




    </div>
</template>

<script mfc>
    
</script>